<script lang="ts">
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const resData = reactive({
      showPreview1: false,
      showPreview2: false,
      showPreview3: false,
      showPreview4: false,
      imgData: [
        {
          src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
        },
        {
          src:
            'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
        },
        {
          src:
            'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
        },
        {
          src:
            'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
        },
      ],
      videoData: [
        {
          source: {
            src:
              'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
            type: 'video/mp4',
          },
          options: {
            muted: true,
            controls: true,
          },
        },
        {
          source: {
            src:
              'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
            type: 'video/mp4',
          },
          options: {
            muted: true,
            controls: true,
          },
        },
      ],
    })

    const showFn = (i: number) => {
      (resData as any)[`showPreview${i}`] = true
    }

    // const fnShow = () => {
    //   ImagePreview({
    //     show: true,
    //     images: resData.imgData,
    //     onClose
    //   });
    // };

    const hideFn = (i: number) => {
      (resData as any)[`showPreview${i}`] = false
    }

    return {
      ...toRefs(resData),
      showFn,
      hideFn,
      // fnShow
    }
  },
}
</script>

<template>
  <div class="demo h-100vh!">
    <h2 class="title">
      基础用法
    </h2>
    <nut-image-preview
      :show="showPreview1"
      :images="imgData"
      :is-loop="false"
      @close="hideFn(1)"
    />
    <nut-cell
      is-link
      title="展示图片预览"
      :show-icon="true"
      @click="showFn(1)"
    />

    <h2 class="title">
      设置初始页码
    </h2>
    <nut-image-preview
      :show="showPreview2"
      :images="imgData"
      :init-no="3"
      @close="hideFn(2)"
    />
    <nut-cell
      is-link
      title="设置初始页码"
      :show-icon="true"
      @click="showFn(2)"
    />

    <h2 class="title">
      设置轮播指示器及颜色
    </h2>
    <nut-image-preview
      :show="showPreview3"
      :images="imgData"
      :pagination-visible="true"
      pagination-color="red"
      @close="hideFn(3)"
    />
    <nut-cell
      is-link
      title="设置轮播指示器及颜色"
      :show-icon="true"
      @click="showFn(3)"
    />
  </div>
</template>

<style lang="scss"></style>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "ImagePreview"
  }
}
</route>
